<template>
    <div class="resetPassword">
        <div class="navHead">
            <van-nav-bar
                    :border="false"
                    title="重置登录密码"
                    left-arrow
                    @click-left="$navBack('prePath')">
            </van-nav-bar>
        </div>
        <div class="headWrap">
           <div class="text-center-pk ">
               <div class="font-size-12-pk">验证手机号码</div>
               <div class="font-size-16-pk">{{phone}}</div>
           </div>
            <div class="operateWrap">
                <div class="d-flex-pk page-pad-pk sendItem">
                    <van-field v-model="phoneCode" :left-icon="require('@img/register-sms-code.png')" placeholder="请输入短信校验码">
                        <van-button slot="button" size="small" color="#D82D11" @click="sendValid">{{countTips}}</van-button>
                    </van-field>
                    <!--<div class="sendBtn font-size-13-pk">
                        发送验证码
                    </div>-->
                </div>
                <div class="d-flex-pk page-pad-pk sendItem">
                    <van-field v-model="newPassword" :left-icon="require('@img/login-password.png')" placeholder="请输入新密码"/>
                </div>
                <div class="d-flex-pk page-pad-pk sendItem">
                    <van-field v-model="confirmPassword" :left-icon="require('@img/login-password.png')" placeholder="请再次输入新密码"/>
                </div>
                <div class="sureBtn font-size-15-pk" @click="resetPassword">
                    重置
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                phoneCode:"",
                userInfo:{},
                phone:"",
                newPassword: "",
                confirmPassword:"",
                countTips:"发送验证码",
                mesSending:false,
            }
        },
        created(){
            this.getUserInfo();
        },
        methods:{
            //获取用户信息
            getUserInfo(){
                this.$api.getUserInfo('1').then(res=>{
                    let result=this.$resData(res);
                    if(result){
                        this.userInfo=result;
                        this.phone=result.phone
                    }
                })
            },
            //发送验证码
            sendValid() {
                if(!this.$valid.phone(this.phone)) {
                    return
                }
                //发送中，不在请求
                if(this.mesSending) {
                    return
                }
                this.mesSending = true;
                this.$api.editPasswordCode(this.phone).then( res => {
                    if(this.$resResult(res)) {
                        this.getCount();
                    }else {
                        this.mesSending = false;
                    }
                });
            },
            //计数倒数60秒
            getCount() {
                let count = 60;
                this.countTips = count + "秒";
                if(!this.validCodeTimer) {
                    this.validCodeTimer = setInterval(()=> {
                        if(count > 0 ) {
                            count --;
                            this.countTips = count + "秒";
                        }else {
                            clearInterval(this.validCodeTimer);
                            this.validCodeTimer = null;
                            this.mesSending = false;
                            this.countTips = "重新发送";
                        }
                    }, 1000)
                }
            },
            resetPassword(){

            },
        }
    }
</script>
<style lang="scss" scoped>
    .resetPassword{
        line-height: 1.8;
        font-size: 14px;
        .navHead{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 999;
        }
        .headWrap{
            padding-top: 70px;
        }
        .operateWrap{
            .sendItem{
                margin: 25px 10px;
                position: relative;
                line-height: 14px;
                .van-cell{
                    border-radius: 5px;
                    align-items: center;
                    button{
                        font-size: 13px;
                    }
                }
            }
            .sendBtn{
                position: absolute;
                top: 5px;
                right: 20px;
                margin-left: 5px;
                padding: 3px 10px;
                color: #fff;
                border-radius: 5px;
                background-color: #D82D11;
            }
            .sureBtn{
                text-align: center;
               margin: 25px ;
                border-radius: 5px;
                background-color: #D82D11;
                padding: 8px;
                color: white;
            }
        }
    }
</style>
